.hzdz-gradient-panel {
  width: 500px;
  height: 593px;
  position: relative;
  box-sizing: border-box;
  
  // 默认透明背景，会被props中的backgroundColor覆盖
  background: transparent;
  
  // 边框
  border: 1px solid rgba(77,89,102,0.25);
  
  // 响应式设计
  &.responsive {
    @media (max-width: 1200px) {
      width: 90%;
      height: auto;
      min-height: 400px;
    }
    
    @media (max-width: 768px) {
      width: 95%;
      min-height: 300px;
    }
    
    @media (max-width: 480px) {
      width: 100%;
      min-height: 250px;
    }
  }
  
  // 设计模式下的边框提示
  &[data-component-name] {
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border: 2px dashed rgba(24, 144, 255, 0.5);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    
    &:hover::before {
      opacity: 1;
    }
  }
}